<template>
    <div>
        <!--页面title-->
        <mainTitleText>
            <span slot="account" class="account">账号管理</span>
            <span slot="accountEnglish">ACCOUNT MANAGEMENT</span>
        </mainTitleText>
        <!--添加-->
        <div class="add" :add="addData">
            <span>添加账号：</span>
            <form class="layui-form form1" lay-filter="form1" :form1="form1" :action="urls.table.addPush">
                <div class="layui-inline">
                    <div class="layui-input-block">
                        <select
                                lay-filter="role"
                                name="role"
                                lay-verify="required"
                                lay-search>
                            <option value="">职位</option>
                            <option
                                    :value="item.id"
                                    v-for="(item,index) in add.position">{{item.rolename}}</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input
                                class="layui-input"
                                lay-verify="phone"
                                required
                                name="telephone"
                                type="tel"
                                maxlength="11"
                                autocomplete="off"
                                placeholder="账号（手机号）">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input
                                class="layui-input"
                                lay-verify="required"
                                required
                                name="name"
                                type="text"
                                maxlength="20"
                                autocomplete="off"
                                placeholder="账户名">
                    </div>
                </div>
                <div class="layui-inline" v-show="addShow.companyShow">
                    <div class="layui-input-block">
                        <input
                                class="layui-input"
                                :lay-verify="addShow.companyShow?'required':''"
                                name="company"
                                type="tel"
                                maxlength="80"
                                autocomplete="off"
                                placeholder="请输入所属公司">
                    </div>
                </div>
                <div class="layui-inline"
                     v-show="addShow.projectShow"
                     style="width: 220px;">
                    <div class="layui-input-block">
                        <select
                                lay-filter="project"
                                name="project"
                                xm-select="project"
                                xm-select-show-count="1"
                                xm-select-search-type="dl"
                                lay-verify="projectVerify"
                                lay-search>
                            <option value="">所属项目</option>
                            <option
                                    :value="item.id"
                                    v-for="(item,index) in add.project">{{item.project}}</option>
                        </select>
                    </div>
                </div>
                <!-- v-show="fenxiaoShow === '6'"-->
                <div class="layui-inline" v-show="addShow.fenxiaoShow">
                    <div class="layui-input-block">
                        <!--:lay-verify="(fenxiaoShow === '6')?'required':''"-->
                        <select
                                lay-filter="distribute"
                                name="distribute"
                                :lay-verify="addShow.fenxiaoShow?'required':''"
                                lay-search>
                            <option value="">所属分销总</option>
                            <option :value="item.id" v-for="(item,index) in add.distribute">{{item.name}}</option>

                        </select>
                    </div>
                </div>
                <div class="layui-inline" v-show="addShow.typeShow">
                    <div style="width: 200px;" class="layui-input-block">
                        <select
                                lay-filter="type"
                                name="style"
                                xm-select="type"
                                xm-select-show-count="1"
                                xm-select-search-type="dl"
                                :lay-verify="addShow.typeShow?'required':''"
                                lay-search>
                            <option value="">项目类型</option>
                            <option value="优选住宅">优选住宅</option>
                            <option value="高端住宅">高端住宅</option>
                            <option value="商业地产">商业地产</option>
                            <option value="海外住宅">海外住宅</option>
                            <option value="国内旅居">国内旅居</option>

                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="width: 220px!important;height: 36px!important;">
                    <div class="layui-input-block">
                        <select
                                lay-filter="function"
                                name="fun"
                                lay-verify="required"
                                xm-select="function"
                                xm-select-show-count="1"
                                xm-select-search-type="dl"
                                lay-search>
                            <option value="">请选择功能</option>
                            <option :value="item.id" v-for="(item,index) in add.gongneng">{{item.fun}}</option>

                        </select>
                    </div>
                </div>
                <button class="layui-btn" type="button" lay-submit lay-filter="formDemoPane">添加</button>
            </form>
        </div>
        <div class="main">
            <!--搜索-->
            <div class="search">
                <form class="layui-form layui-form-pane formSearch" lay-filter="formSearch" :formSearch="formSearch">
                    <div class="layui-form-item" >
                        <div class="layui-input-inline">
                            <select
                                    lay-filter="selectedPosition"
                                    name="selectedPosition"
                                    lay-search>
                                <option value="ziji">次级账号</option>
                                <option value="quanbu">全部账号</option>
                                <option
                                        :value="item.id"
                                        v-for="(item,index) in add.zhiwei">{{item.rolename}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" v-show="(selectedPositionAll.selectedPosition1.length!==0)&&(showJunior===true)">
                        <div class="layui-input-inline">
                            <select
                                    lay-filter="selectedPosition1"
                                    name="selectedPosition1"
                                    lay-search>
                                <!--<option value="" disabled >账户名</option>-->
                                <option
                                        :value="item.id"
                                        v-for="(item,index) in selectedPositionAll.selectedPosition1">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" v-show="(selectedPositionAll.selectedPosition2.length!==0)&&(showJunior===true)">
                        <div class="layui-input-inline">
                            <select
                                    lay-filter="selectedPosition2"
                                    name="selectedPosition2"
                                    lay-search>
                                <!--<option value="">账户名</option>-->
                                <option
                                        :value="item.id"
                                        v-for="(item,index) in selectedPositionAll.selectedPosition2">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" v-show="(selectedPositionAll.selectedPosition3.length!==0)&&(showJunior===true)">
                        <div class="layui-input-inline">
                            <select
                                    lay-filter="selectedPosition3"
                                    name="selectedPosition3"
                                    lay-search>
                                <!--<option value="">账户名</option>-->
                                <option
                                        :value="item.id"
                                        v-for="(item,index) in selectedPositionAll.selectedPosition3">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" v-show="(selectedPositionAll.selectedPosition4.length!==0)&&(showJunior===true)">
                        <div class="layui-input-inline">
                            <select
                                    lay-filter="selectedPosition4"
                                    name="selectedPosition4"
                                    lay-search>
                                <!--<option value="">账户名</option>-->
                                <option
                                        :value="item.id"
                                        v-for="(item,index) in selectedPositionAll.selectedPosition4">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" v-show="(selectedPositionAll.selectedPosition5.length!==0)&&(showJunior===true)">
                        <div class="layui-input-inline">
                            <select
                                    lay-filter="selectedPosition5"
                                    name="selectedPosition5"
                                    lay-search>
                                <!--<option value="">账户名</option>-->
                                <option
                                        :value="item.id"
                                        v-for="(item,index) in selectedPositionAll.selectedPosition5">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" v-show="(selectedPositionAll.selectedPosition6.length!==0)&&(showJunior===true)">
                        <div class="layui-input-inline">
                            <select
                                    lay-filter="selectedPosition6"
                                    name="selectedPosition6"
                                    lay-search>
                                <!--<option value="">账户名</option>-->
                                <option
                                        :value="item.id"
                                        v-for="(item,index) in selectedPositionAll.selectedPosition6">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <button class="layui-btn layui-btn-sm" @click="emptyAll" v-show="showJunior===true">清空选项</button>
                    <span>共找到{{count}}个账号</span>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="width: 220px;">
                            <input
                                    type="text"
                                    name="text"
                                    required=""
                                    v-model="search"
                                    onkeydown="if(event.keyCode==13)return false;"
                                    @keyup.enter="searchPush"
                                    lay-verify="required"
                                    placeholder="请输入关键字"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" @click="searchPush">
                            <i></i>
                        </label>
                    </div>
                </form>
            </div>
            <div>
                <!--表格-->
                <table id="table"
                       :formTable="formTable"
                       lay-filter='text'
                       style="width: 100%!important;"></table>
                <!--table工具条-->
                <script type="text/html" :class="{barDemo:showTool}">
                  <a class="layui-btn layui-btn-xs" style="background-color:#cd1f5c" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                   <a class="layui-btn layui-btn-xs" style="background-color: #999" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
                </script>
                <!--点击编辑弹出修改页面-->
                <div id="edit" class="">
                      <form action="" class="layui-form" :form2="form2">
                          <div class="layui-form-item">
                              <label class="layui-form-label">职位</label>
                              <div class="layui-input-inline" style="width: 200px;" >
                                  <select
                                          id="select2"
                                          lay-filter="role2"
                                          name="role"
                                          lay-verify="required">
                                      <option value="">职位</option>
                                      <option
                                              :value="item.id"
                                              v-for="(item,index) in add.position">{{item.rolename}}</option>
                                  </select>
                              </div>
                          </div>
                          <div class="layui-form-item">
                              <label class="layui-form-label">账号(手机号)</label>
                              <div class="layui-input-inline" style="width: 200px;" >
                                  <input
                                          class="layui-input"
                                          lay-verify="phone"
                                          required
                                          name="telephone"
                                          type="tel"
                                          maxlength="11"
                                          autocomplete="off"
                                          :value="values.telephone"
                                          placeholder="账号(手机号)">
                              </div>
                          </div>
                          <div class="layui-form-item">
                              <label class="layui-form-label">账户名</label>
                              <div class="layui-input-inline" style="width: 200px;" >
                                  <input
                                          class="layui-input"
                                          lay-verify="required"
                                          required
                                          name="name"
                                          type="text"
                                          maxlength="20"
                                          :value="values.name"
                                          autocomplete="off"
                                          placeholder="账户名">
                              </div>
                          </div>
                          <div class="layui-form-item" v-show="editShow.companyShow">
                              <label class="layui-form-label">所属公司</label>
                              <div class="layui-input-inline" style="width: 200px;" >
                                  <input
                                          class="layui-input"
                                          :lay-verify="editShow.companyShow?'required':''"
                                          required
                                          name="company"
                                          type="tel"
                                          maxlength="11"
                                          autocomplete="off"
                                          :value="editShow.companyShow?values.company:''"
                                          placeholder="请输入所属公司">
                              </div>
                          </div>
                          <div class="layui-form-item" v-show="editShow.projectShow">
                              <label class="layui-form-label">所属项目</label>
                              <div class="layui-input-inline" style="width: 200px;" >
                                  <select
                                          id="select3"
                                          lay-filter="project1"
                                          name="project"
                                          xm-select="project1"
                                          xm-select-show-count="1"
                                          xm-select-search-type="dl"
                                          lay-verify="projectVerify1"
                                          lay-search>
                                      <option value="">所属项目</option>
                                      <option
                                              v-for="(item,index) in add.project"
                                              :value="editShow.projectShow?item.id:''"
                                      >{{item.project}}</option>
                                  </select>
                              </div>
                          </div>
                          <div class="layui-form-item" v-show="editShow.fenxiaoShow">
                              <label class="layui-form-label">所属分销总</label>
                              <div class="layui-input-inline" style="width: 200px;" >
                                  <select
                                          id="select4"
                                          lay-filter="distribute2"
                                          name="distribute"
                                          :lay-verify="editShow.fenxiaoShow?'required':''"
                                          lay-search>
                                      <option value="">所属分销总</option>
                                      <option
                                              :value="item.id"
                                              v-for="(item,index) in add.distribute">{{item.name}}</option>

                                  </select>
                              </div>
                          </div>
                          <div class="layui-form-item" v-show="editShow.typeShow">
                              <label class="layui-form-label">项目类型</label>
                              <div style="width: 200px;" class="layui-input-inline">
                                  <select
                                          lay-filter="type1"
                                          name="style"
                                          :lay-verify="editShow.typeShow?'required':''"
                                          xm-select="type1"
                                          xm-select-show-count="1"
                                          xm-select-search-type="dl"
                                          lay-search>
                                      <option value="">项目类型</option>
                                      <option value="优选住宅">优选住宅</option>
                                      <option value="高端住宅">高端住宅</option>
                                      <option value="商业地产">商业地产</option>
                                      <option value="海外住宅">海外住宅</option>
                                      <option value="国内旅居">国内旅居</option>

                                  </select>
                              </div>
                          </div>

                          <div class="layui-form-item">
                              <label class="layui-form-label">请选择功能</label>
                              <div style="width: 200px;" class="layui-input-inline">
                                  <select
                                          lay-filter="function1"
                                          name="fun"
                                          lay-verify="required"
                                          xm-select="function1"
                                          xm-select-show-count="1"
                                          xm-select-search-type="dl"
                                          lay-search>
                                      <option value="">请选择功能</option>
                                      <option :value="item.id" v-for="(item,index) in add.gongneng">{{item.fun}}</option>

                                  </select>
                              </div>
                          </div>
                          <div class="layui-form-item">
                              <label class="layui-form-label"></label>
                              <button
                                      class="layui-btn"
                                      type="button"
                                      lay-submit lay-filter="amend">确认</button>
                          </div>
                      </form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import $ from 'jquery'
    import mainTitleText from '@/components/module/mainTitleText'
    export default {
        name: 'tableMain',
        props: ['urls'],
        data() {
            return {
                valueAll: '',
                getValueSuc:false,
                addShow: {
                    fenxiaoShow: false,//所属分销展示
                    companyShow: false,//所属公司展示
                    projectShow: false,//所属项目展示
                    typeShow: false,//项目类型展示
                },
                editShow: {
                    fenxiaoShow: false,//所属分销展示
                    companyShow: false,//所属公司展示
                    projectShow: false,//所属项目展示
                    typeShow: false,//项目类型展示
                },
                count: '',//表格数据加咱总值
                search: '',//搜索key值
                values: {},//点击编辑传递数据
                add: {//页面select值
                    project: '',
                    distribute: '',
                    gongneng: '',
                    position: '',
                    zhiwei:''
                },
                fields: {//不可轻易修改该对象顺序 624行
                    number: {field: 'numbers', title: '序号', type: 'numbers', width: 80}
                    , role: {field: 'role', title: '职位',maxWidth:'132'}
                    , telephone: {field: 'telephone', title: '账号（手机号）',maxWidth:'132'}
                    , name: {field: 'name', title: '账户名',maxWidth:'123'}
                    , time: {field: 'time', title: '录入时间'}
                    , company: {field: 'company', title: '所属公司'}
                    , style: {field: 'style1', title: '项目类型'}
                    , project: {field: 'project', title: '所属项目'}
                    , distribute: {field: 'distribute', title: '所属分销总'}
                    , right: {field: 'right', title: '操作', align: 'center', toolbar: '.barDemo'} //这里的toolbar值是模板元素的选择器}
                },
                isComplete:false,//表格显示不完全问题，通过修改该参数判定上线已执行完成
                showTool:true,
                showJunior:true,//显示下级
                selectedPositionAll:{//获取下级信息集合
                    selectedPosition1:[],
                    selectedPosition2:[],
                    selectedPosition3:[],
                    selectedPosition4:[],
                    selectedPosition5:[],
                    selectedPosition6:[],
                }
            }
        },
        components: {
            'mainTitleText': mainTitleText
        },
        computed: {
            addData() {
                let _this = this;
                $.ajax({//获取数据
                    type: 'POST',
                    url: this.urls.table.add,
                    success: function (res) {
                            _this.add = res;
                            _this.add.position = res.position;
                        _this.$nextTick(function () {
                            layui.use(['form', 'formSelects'], function () {
                                var form = layui.form;
                                var formSelects = layui.formSelects;
                                form.render(null, 'form1');
                                formSelects.render('function', {
                                    skin: 'default',
                                });
                            })
                        });
                      _this.getValueSuc = true;
                    }
                });
            },
            form1() {//添加
                var _this = this;
                layui.use(['form', 'jquery', 'formSelects'], function () {
                    var form = layui.form;
                    var formSelects = layui.formSelects;
                    formSelects.render('function', {
                        skin: 'default',
                        radio: false,
                        create: function (id, name) {
                            return Date.now();
                        },
                    });
                    formSelects.render('type', {
                        skin: 'default',
                        radio: false,
                        create: function (id, name) {
                            return Date.now();
                        },
                    });
                    formSelects.render('project', {
                        skin: 'default',
                        radio: false,
                        create: function (id, name) {
                            return Date.now();
                        },
                    });
                    form.on('select(role)', function (data) {
                        var position = _this.add.position;
                        _this.valueAll = data.value;
                            formSelects.render('project', {
                                skin: 'default',
                                radio: false,
                                create: function (id, name) {
                                    return Date.now();
                                },
                            });
                        if (data.value === '22' || data.value === '23') {
                            _this.addShow.typeShow = true;
                        } else {
                            _this.addShow.typeShow = false;
                        }
                        for (var i = 0; i < position.length; i++) {
                            if (position[i].id == data.value) {
                                var word = position[i].word;
                                if ($.inArray("company", word) !== -1) {
                                    _this.addShow.companyShow = true;
                                } else {
                                    _this.addShow.companyShow = false;
                                }

                                if ($.inArray("project", word) !== -1) {
                                    _this.addShow.projectShow = true;
                                } else {
                                    _this.addShow.projectShow = false;
                                }
                                if ($.inArray("distribute", word) !== -1) {
                                    _this.addShow.fenxiaoShow = true;
                                } else {
                                    _this.addShow.fenxiaoShow = false;
                                }

                            }
                        }
                        formSelects.render();
                        form.render();
                    });
                    form.on('submit(formDemoPane)', function (data) {//添加成功，重载数据表
                        $.post(_this.urls.table.addPush, data.field, function (res) {
                            layer.msg(res.message);
                            layui.use(['table'], function () {
                                var table = layui.table;
                                table.reload('idTest', {});
                                $("form")[0].reset();
                                formSelects.value('function',['']);
                            })
                        })
                    });
                    form.verify({
                        projectVerify: function (value, item) {
                            if (_this.addShow.projectShow) {
                                if (value === '') {
                                    return '必选项不能为空';
                                }
                            }

                        }
                    });
                    form.render();
                    formSelects.render();
                })
            },
            form2() {//编辑
                var _this = this;
                layui.use(['form', 'jquery', 'formSelects'], function () {
                    var form = layui.form;
                    var formSelects = layui.formSelects;
                    var position = _this.add.position;
                    _this.$nextTick(function () {
                        form.render();
                        formSelects.render('function1', {
                            skin: 'default',
                            create: function () {
                                return Date.now();
                            },
                        });
                        formSelects.render('type1', {
                            skin: 'default',
                            create: function () {
                                return Date.now();
                            },
                        });
                    })

                    form.on('select(role2)', function (data) {
                        var position = _this.add.position;
                        for (var i = 0; i < position.length; i++) {
                            if (position[i].id == data.value) {
                                var word = position[i].word;
                                if ($.inArray("company", word) !== -1) {
                                    _this.editShow.companyShow = true;
                                } else {
                                    _this.editShow.companyShow = false;
                                }
                                if ($.inArray("project", word) !== -1) {
                                    _this.editShow.projectShow = true;
                                } else {
                                    _this.editShow.projectShow = false;
                                }

                                if ($.inArray("distribute", word) !== -1) {
                                    _this.editShow.fenxiaoShow = true;
                                } else {
                                    _this.editShow.fenxiaoShow = false;
                                }
                                // form.render();
                            }
                        }
                        if (data.value === '14') {
                            formSelects.render('project1', {
                                skin: 'default',
                                init: '',
                                radio: false,
                                create: function () {
                                    return Date.now();
                                },
                            });
                        } else {
                            formSelects.render('project1', {
                                skin: 'default',
                                init: '',
                                radio: true,
                                create: function () {
                                    return Date.now();
                                },
                            });
                            // $('.xm-select-radio>dd:first-child').remove()
                        }
                        if (data.value === '22' || data.value === '23') {
                            _this.editShow.typeShow = true;
                        } else {
                            _this.editShow.typeShow = false;
                        }
                        form.render()
                    });
                    form.on('submit(amend)', function (data) {
                        data.field.id = _this.values.id;
                        if (!_this.editShow.fenxiaoShow) {
                            data.field.distribute = ''
                        }
                        $.post(_this.urls.table.addPush, data.field, function (res) {
                            // // console.log(data.field)
                            layer.msg(res.message);
                            layui.use(['table'], function () {
                                var table = layui.table;
                                var url = _this.urls.table.tab;
                                table.reload('idTest', {
                                    url: url,
                                });
                                layer.closeAll('page');
                                $('#edit').hide()
                            })
                        });
                        form.render('select')
                    });
                    form.verify({
                        projectVerify1: function (value, item) {
                            if (_this.editShow.projectShow) {
                                if (value === '') {
                                    return '必选项不能为空';
                                }
                            }

                        }
                    });
                })
            },
            formTable() {
                var _this = this,
                    url = this.urls.table.tab,
                    cols = [], arr = [], sub = [];
                // console.log(_this.getValueSuc)
                if(_this.getValueSuc){
                    // console.log(1)
                layui.use(['table', 'form', 'formSelects'], function () {
                    var table = layui.table;
                    var form = layui.form;
                    var formSelects = layui.formSelects;
                    cols.push(//将table头对象信息组为数组
                        _this.fields.number,
                        _this.fields.role,
                        _this.fields.telephone,
                        _this.fields.name,
                        _this.fields.project,
                        _this.fields.distribute,
                        _this.fields.time,
                        _this.fields.company,
                        _this.fields.style,
                        _this.fields.right,
                    );
                    for (var i = 0; i < _this.add.position.length; i++) {
                        var word = _this.add.position[i].word;
                        sub.push(...word);//将动态显示得元素‘判定值’合并为一个数组
                    }
                    for (let x in cols) {//遍历cols数组
                        if ($.inArray("company", sub) === -1) {//判定该用户是否含有该权限，否删除该信息
                            delete cols[7]
                        }
                        if ($.inArray("style", sub) === -1) {//判定该用户是否含有该权限，否删除该信息
                            delete cols[8]
                        }
                        if ($.inArray("project", sub) === -1) {//判定该用户是否含有该权限，否删除该信息
                            delete cols[4]
                        }
                        if ($.inArray("distribute", sub) === -1) {//判定该用户是否含有该权限，否删除该信息
                            delete cols[5]
                        }
                        arr.push(cols[x]);//将删除后得数组赋值为新数组，该数组为新得table表头信息
                    }
                        table.render({
                            elem: '#table'
                            , id: 'idTest'
                            , height: '491'
                            , limit: 10
                            , url: url //数据接口
                            , page: {theme: '#cd1f5c'} //开启分页
                            , cols: [arr]
                            , done: function (res, curr, count) {//渲染完成回调，获取总条目数。
                                _this.count = count;
                                for(var x in res.data){
                                    _this.selectedPositionAll.selectedPosition1.push({id:res.data[x].id,name:res.data[x].name});
                                    _this.$nextTick(function(){
                                            form.render();
                                    })
                                }
                            }
                        });
                    //监听工具条事件
                    table.on('tool(text)', function (obj) {
                        var data = obj.data //获得当前行数据
                            , layEvent = obj.event; //获得 lay-event 对应的值
                        if (layEvent === 'del') {
                            layer.confirm('您确定要删除吗？', function (index) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                //向服务端发送删除指令
                                $.ajax({
                                    type: 'GET',
                                    url: _this.urls.table.del,
                                    data: {id: data.id},
                                    success: function (res) {
                                        layer.msg(res.message)
                                    }
                                })
                            });
                        } else if (layEvent === 'edit') {
                            var arr = [],aub = [], sub = [];
                            var select2 = $("#select2").find("option"),
                                select3 = $("#select3").find("option"),
                                select4 = $("#select4").find("option");
                            _this.values = obj.data;
                            selected(select2, _this.values.role);
                            selected(select3, _this.values.project);
                            selected(select4, _this.values.distribute);
                            if (obj.data.company === null) {
                                _this.editShow.companyShow = false;
                            } else if (obj.data.company === '') {
                                _this.editShow.companyShow = false;
                            } else {
                                _this.editShow.companyShow = true;
                            }
                            if (obj.data.project === null) {
                                _this.editShow.projectShow = false;
                            } else if (obj.data.project === '') {
                                _this.editShow.projectShow = false;
                            } else {
                                _this.editShow.projectShow = true;
                            }
                            if (obj.data.distribute === null) {
                                _this.editShow.fenxiaoShow = false;
                            } else if (obj.data.distribute === '') {
                                _this.editShow.fenxiaoShow = false;
                            } else {
                                _this.editShow.fenxiaoShow = true;
                            }
                            arr.push((_this.values.fun).split(','));
                            aub.push((_this.values.style).split(','));
                            _this.$nextTick(function () {
                                form.render();
                                try {
                                    sub.push((_this.values.project1).split(','));
z                               }catch (e) {

                                }
                                if (obj.data.role === "驻场总监" || obj.data.role === "渠道销售总监") {
                                    _this.editShow.typeShow = true;
                                } else {
                                    _this.editShow.typeShow = false;
                                }
                                if (obj.data.role === '渠道经理') {
                                    formSelects.render('project1', {
                                        init: sub[0],
                                        skin: 'default',
                                        radio: false,
                                        create: function () {
                                            return Date.now();
                                        },
                                    });
                                } else {
                                    formSelects.render('project1', {
                                        skin: 'default',
                                        init: sub[0],
                                        radio: true,
                                        create: function () {
                                            return Date.now();
                                        },
                                    });
                                }
                                formSelects.render('function1',{
                                    init:arr[0],
                                    skin:'default'
                                });
                                // console.log(aub,arr);
                                formSelects.render('type1',{
                                    init:aub[0],
                                    skin:'default'
                                });
                            });
                            var position = _this.add.position;
                            for (var i = 0; i < position.length; i++) {
                                if (position[i].rolename == obj.data.role) {
                                    var word = position[i].word;
                                    if ($.inArray("company", word) !== -1) {
                                        _this.editShow.companyShow = true;
                                    } else {
                                        _this.editShow.companyShow = false;
                                    }

                                    if ($.inArray("project", word) !== -1) {
                                        _this.editShow.projectShow = true;
                                    } else {
                                        _this.editShow.projectShow = false;
                                    }

                                    if ($.inArray("distribute", word) !== -1) {
                                        _this.editShow.fenxiaoShow = true;
                                    } else {
                                        _this.editShow.fenxiaoShow = false;
                                    }
                                    form.render();
                                }
                            }
                            layer.open({
                                type: 1,
                                area: ['450px', '500px'],
                                title: ['编辑账号管理'],
                                content: $('#edit'),
                                cancel: function () {
                                    $('#edit').hide();
                                }
                            });
                        }
                    });
                });
                }
            },
            formSearch(){
                var _this = this;
                var url = this.urls.table.tab;
                layui.use(['form','table'], function () {
                    var form = layui.form;
                    var table = layui.table;
                    form.on('select(selectedPosition)',function(data){
                        if(data.value === 'ziji'){
                            _this.selectedPositionAll.selectedPosition2 = [];
                            _this.selectedPositionAll.selectedPosition3 = [];
                            _this.selectedPositionAll.selectedPosition4 = [];
                            _this.selectedPositionAll.selectedPosition5 = [];
                            _this.selectedPositionAll.selectedPosition6 = [];
                            table.reload('idTest',{
                                url: url,
                                where:{
                                    id:'',
                                    mark:data.value
                                },done: function (res) {//渲染完成回调，获取总条目数。
                                    _this.count = res.count;
                                    // _this.selectedPositionAll.selectedPosition1 = [];

                                }
                            });
                            _this.showTool = true;
                            _this.showJunior = true;
                        }else{
                            table.reload('idTest',{
                                url: url,
                                where:{
                                    mark:data.value
                                },done: function (res) {//渲染完成回调，获取总条目数。
                                    _this.count = res.count;

                                }
                            });
                            _this.showTool = false;
                            _this.showJunior = false;
                        }

                    });
                    form.on('select(selectedPosition1)',function(data){
                        table.reload('idTest',{
                            url: url,
                            where:{
                                id:data.value,
                                mark:'ziji'
                            },done: function (res) {//渲染完成回调，获取总条目数。
                                _this.count = res.count;
                                if(res.count ===0){
                                    _this.selectedPositionAll.selectedPosition2 = [];
                                    _this.selectedPositionAll.selectedPosition3 = [];
                                    _this.selectedPositionAll.selectedPosition4 = [];
                                    _this.selectedPositionAll.selectedPosition5 = [];
                                    _this.selectedPositionAll.selectedPosition6 = [];
                                }else{
                                    _this.selectedPositionAll.selectedPosition2 = [];
                                    for(var x in res.number){
                                        console.log(res)
                                        _this.selectedPositionAll.selectedPosition2.push({id:res.number[x].id,name:res.number[x].name});
                                        _this.selectedPositionAll.selectedPosition3 = [];
                                        _this.selectedPositionAll.selectedPosition4 = [];
                                        _this.selectedPositionAll.selectedPosition5 = [];
                                        _this.selectedPositionAll.selectedPosition6 = [];
                                        _this.$nextTick(function(){
                                            form.render();
                                        })
                                    }
                                }
                            }
                        });
                        _this.showTool = false;
                    });
                    form.on('select(selectedPosition2)',function(data){
                        table.reload('idTest',{
                            url: url,
                            where:{
                                id:data.value,
                                mark:'ziji'
                            },done: function (res) {//渲染完成回调，获取总条目数。
                                _this.count = res.count;
                                _this.selectedPositionAll.selectedPosition3 = [];
                                if(_this.count !==0){
                                    for(var x in res.number){
                                    _this.selectedPositionAll.selectedPosition3.push({id:res.number[x].id,name:res.number[x].name});
                                    _this.selectedPositionAll.selectedPosition4 = [];
                                    _this.selectedPositionAll.selectedPosition5 = [];
                                    _this.selectedPositionAll.selectedPosition6 = [];
                                    _this.$nextTick(function(){
                                        form.render();
                                    })
                                }
                                }else{
                                    _this.selectedPositionAll.selectedPosition3 = [];
                                    _this.selectedPositionAll.selectedPosition4 = [];
                                    _this.selectedPositionAll.selectedPosition5 = [];
                                    _this.selectedPositionAll.selectedPosition6 = [];
                                }

                            }
                        });
                        _this.showTool = false;
                    });
                    form.on('select(selectedPosition3)',function(data){
                        table.reload('idTest',{
                            url: url,
                            where:{
                                id:data.value,
                                mark:'ziji'
                            },done: function (res) {//渲染完成回调，获取总条目数。
                                _this.count = res.count;
                                _this.selectedPositionAll.selectedPosition4 = [];
                                if(_this.count !==0){
                                    for(var x in res.number){
                                        _this.selectedPositionAll.selectedPosition4.push({id:res.number[x].id,name:res.number[x].name});
                                        _this.selectedPositionAll.selectedPosition5 = [];
                                        _this.selectedPositionAll.selectedPosition6 = [];
                                        _this.$nextTick(function(){
                                            form.render();
                                        })
                                    }
                                }else{
                                    _this.selectedPositionAll.selectedPosition4 = [];
                                    _this.selectedPositionAll.selectedPosition5 = [];
                                    _this.selectedPositionAll.selectedPosition6 = [];
                                }

                            }
                        });
                        _this.showTool = false;
                    });
                    form.on('select(selectedPosition4)',function(data){
                        table.reload('idTest',{
                            url: url,
                            where:{
                                id:data.value,
                                mark:'ziji'
                            },done: function (res) {//渲染完成回调，获取总条目数。
                                _this.count = res.count;
                                _this.selectedPositionAll.selectedPosition5 = [];
                                if(_this.count !==0){
                                    for(var x in res.number){
                                        _this.selectedPositionAll.selectedPosition5.push({id:res.number[x].id,name:res.number[x].name});
                                        _this.selectedPositionAll.selectedPosition6 = [];
                                        _this.$nextTick(function(){
                                            form.render();
                                        })
                                    }
                                }else{
                                    _this.selectedPositionAll.selectedPosition5 = [];
                                }

                            }
                        });
                        _this.showTool = false;
                    });
                    form.on('select(selectedPosition5)',function(data){
                        table.reload('idTest',{
                            url: url,
                            where:{
                                id:data.value,
                                mark:'ziji'
                            },done: function (res) {//渲染完成回调，获取总条目数。
                                _this.count = res.count;
                                _this.selectedPositionAll.selectedPosition6 = [];
                                if(_this.count !==0){
                                    for(var x in res.number){
                                        _this.selectedPositionAll.selectedPosition6.push({id:res.number[x].id,name:res.number[x].name});
                                        _this.$nextTick(function(){
                                            form.render();
                                        })
                                    }
                                }else{
                                    _this.selectedPositionAll.selectedPosition6 = [];
                                }

                            }
                        });
                        _this.showTool = false;
                    });
                    form.on('select(selectedPosition6)',function(data){
                        table.reload('idTest',{
                            url: url,
                            where:{
                                id:data.value,
                                mark:'ziji'
                            },done: function (res) {//渲染完成回调，获取总条目数。
                                _this.count = res.count;
                            }
                        });
                        _this.showTool = false;
                    });
                })
            },
        },
        methods: {
            searchPush() {//search 获取查询数据 重载表格
                var key = this.search,
                    url = this.urls.table.tab;
                layui.use(['table'], function () {//搜索直接更新表格数据
                    var table = layui.table;
                    table.reload('idTest', {
                        url: url,
                        where: {
                            key: key
                        }
                    });
                })
            },
            emptyAll(){
                var _this = this;
                var url = this.urls.table.tab;
                // _this.selectedPositionAll.selectedPosition1 = [];
                _this.selectedPositionAll.selectedPosition2 = [];
                _this.selectedPositionAll.selectedPosition3 = [];
                _this.selectedPositionAll.selectedPosition4 = [];
                _this.selectedPositionAll.selectedPosition5 = [];
                _this.selectedPositionAll.selectedPosition6 = [];
                layui.use(['table'], function () {
                    var table = layui.table;
                    table.reload('idTest',{
                        url: url,
                        where:{
                            mark:'ziji'
                        },done: function (res) {//渲染完成回调，获取总条目数。
                            _this.count = res.count;
                        }
                    });
                    _this.showTool = true;
                })
            }
        }
    }

    function selected(b, v) {
        for (var i = 0; i < b.length; i++) {//vue动态绑定selected失效，所以用这么搓的办法
            b.eq(i).removeAttr('selected');
            if (b.eq(i).text() === v) {
                b.eq(i).attr('selected', 'selected');
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../static/css/style.less";
    .add {
        height: 40px;
        line-height: 40px;
        > span, > form, > button {
            .fl;
        }
        > form {
           >div{
               margin-right: 8px;
           }
        }
        .layui-inline, select, .layui-form-select .layui-input {
            /*width: 140px !important;*/
            height: 39px !important;
            color: @c6 !important;
        }
        .layui-input-inline {
            vertical-align: initial;
        }
        .layui-btn {
            width: 80px !important;
            .br(3px);
            .blg(to right, #cd1f5c, #e11e27);
        }
    }
    .main {
        width: 100%;
        background-color: @cf;
        padding: 20px;
        .bs(0 0 5px #ccc);
        margin-top: 20px;
        display: inline-block;
        .search {
            width: 100%;
            height: 40px;
            line-height: 30px;
            padding: 5px 20px;
            background-color: #ededed;
            .pr;
            > .formSearch {
                .df;
                >div,>span{
                    .fl;
                }
                button{
                    margin-right: 15px;
                    cursor: pointer;
                }
                >div:last-child{
                    .pa;
                    right: 20px;
                }
                .layui-form-item {
                    .pr;

                    .layui-input-inline{
                        width: 120px!important;
                    }
                    label {
                        width: 40px;
                        height: 30px;
                        .pa;
                        top: 0;
                        right: 0;
                        cursor: pointer;
                        .br(0 2px 2px 0);
                        .blg(to right, #cd1f5c, #e11e27);
                        i {
                            width: 15px;
                            height: 15px;
                            display: inline-block;
                            .pa;
                            .cm;
                            .bud("../../static/images/search.svg", center center, 100% 100%);
                        }
                    }
                }
            }
        }
    }
    #edit {
        width: 100%;
        height: 100%;
        padding: 20px;
        display: none;
        form {
            width: 100%;
            height: 100%;
            label {
                width: 120px;
                height: 40px;
                line-height: 40px;
                padding-right: 20px;
            }
            .layui-form-item {
                margin-bottom: 15px;
                clear: both;
            }
        }
        button {
            .blg(to right, #cd1f5c, #e11e27);
        }

    }
</style>
